﻿@{
    ViewBag.Title = "Home Page";
}
@model WssDemo.ViewModel.IndexModel

<div class="container">
    <div class="row">
        <div class="col-sm"></div>
        <div class="col-sm">
            <div class="card" style="width: 50rem;">
                <div class="card-header">
                    <div class="row">
                        <div class="col-sm-4 d-flex justify-content-start">
                            <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal"
                                    data-target="#saysomething">
                                发表说说
                            </button>
                        </div>
                        <div class="col-sm-4 d-flex justify-content-center">
                            <p>当前用户： @Model.UserName </p>
                        </div>
                        <div class="col-sm-4 d-flex justify-content-end">
                            <button type="button"
                                    class="btn btn-secondary btn-sm" onclick="logout()">
                                注销
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-sm"></div>
    </div>

    <div class="row">
        <div class="col-sm"></div>
        <div class="col-sm" id="saysaymsg">
            @foreach (var say in Model.SSModels)
            {
                <div class="card border-primary shadow" style="width: 50rem;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-10">@say.Content </div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-secondary btn-sm"
                                        data-toggle="modal" data-target="#comment"
                                        onclick="sayComment('@say.Id')">
                                    吐槽一下
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="@say.Id">
                            @foreach (var com in say.CommentModels)
                            {
                                if (com != null)
                                {
                                    <li class="list-group-item">
                                        <blockquote class="blockquote mb-0">
                                            <p>@com.Comment</p>
                                            <footer class="blockquote-footer">
                                                <cite title="Source Title">@com.FromUserName</cite>&nbsp;&nbsp;对
                                                <cite title="Source Title">@com.ToUserName</cite>&nbsp;&nbsp;说
                                            </footer>
                                        </blockquote>
                                    </li>
                                }

                            }


                        </ul>

                    </div>
                </div>
            }

        </div>
        <div class="col-sm"></div>
    </div>
</div>

<!-- 发表说说  -->
<div class="modal fade" id="saysomething" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">发表说说</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" aria-describedby="passwordHelpInline" id="sayMsg">
                        <!-- <small id="passwordHelpInline" class="text-muted">
                          Must be 8-20 characters long.
                        </small> -->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saysay()">发表</button>
            </div>
        </div>
    </div>
</div>

<!-- 吐槽一下 -->
<div class="modal fade" id="comment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">吐槽一下</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" aria-describedby="passwordHelpInline"
                               id="commentMsg">
                        <!-- <small id="passwordHelpInline" class="text-muted">
                          Must be 8-20 characters long.
                        </small> -->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="comment()">吐槽</button>
            </div>
        </div>
    </div>
</div>

<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<script>

    let ssId = 0;
    //注销
    function logout() {
        $.ajax({
            type: "post",
            url: "/Home/ClearAuth",
            success: function (data) {
                location.reload();
            }

        })
    }
    //发表说说
    function saysay() {
        if ($("#sayMsg").val().trim()) {
            $.ajax({
                type: "post",
                url: "/Home/SendSaySay",
                data: { content: $("#sayMsg").val() },
                success: function (data) {

                    console.log(data)
                    if (data.err)
                        return alert(data.msg)
                    $("#saysaymsg").prepend(data)
                    $("#sayMsg").val("");
                }
            })
        }
        console.log("点击")
    }

    //获取说说id
    function sayComment(id) {
        ssId = id;
    }

    //评论说说
    function comment() {
        if ($("#commentMsg").val().trim()) {
            console.log("sadf")
            $.ajax({
                type: "post",
                url: "/Home/SendComment",
                data: { content: $("#commentMsg").val(), ssId },
                success: function (data) {

                    console.log(data)
                    if (data.err)
                        return alert(data.msg)
                    $(`#${ssId}`).prepend(data)
                    $("#commentMsg").val("");
                }
            });
        }
    }
</script>